<br style="line-height: 2em;" />
<div id='docData'>
<script>generateExamForm();</script>

<form id="tebok-toann" method="post" action="/sangTebok" enctype="multipart/form-data" onsubmit="return can_generate_ID(this);">
  <fieldset>
    <legend>投稿題目：</legend>
    <label for="fullname">考試全名：</label><input id="choanmiann" name="choanmiann" type="text" size="137" placeholder="100年公務人員特種考試關務人員考試"/></br>
    <label for="nihun">年份／YEAR：</label><input id="nihun" name="nihun" type="number" placeholder="2012" min="1979"/>
    <label for="hothau">考試代碼／CODE：</label><input id="hothau" name="hothau" type="text" placeholder="23560"/>
    <br/>考試類別／EXAMSET：<input id="khochhi" name="khochhi" type="text" placeholder="關務人員"/>
    組別／CATEGORY：<input id="choopiat" name="choopiat" type="text" placeholder="資訊處理" />
    <br/><label for="tengte">等第／CLASS：</lable>
    <select name="tengte">
      <option value="first">一級</option>
      <option value="second">二級</option>
      <option value="third" selected="selected">三級</option>
      <option value="forth">四級</option>
    </select>
    <label for="khobok">科目／SUBJECT：</lable><input id="khobok" name="khobok" type="text" placeholder="資料結構"/>
    <br/>題號／INDEX：<input id="toeho" name="toeho" type="text" placeholder="1"/>
    點數／POINT：<input id="tiamsoo" name="tiamsoo" type="number" placeholder="20">
    <fieldset>
    <legend>(*必填*)題目內容／CONTEXT：</legend>
    <textarea id="thauhang" name="thauhang" required rows="7" cols="91" placeholder="下圖為二元搜尋樹（binary search tree），請回答下列問題：(一)35的successor為何？(二)50的successor為何？(三)寫出Entry successor(Entry e) 的pseudo code。(四)寫出preorder traversal。(五)寫出postorder traversal。(六)寫出inorder traversal。"></textarea>
    </fieldset>
    <label for="tootoo">附圖／FIGURE：</lable><input id="tootoo" type="file" name="tootoo">
    <input type="submit" value="寄批">
  </fieldset>
</form>
  
</div>

<br style="line-height: 1em;" />
<button style="margin-left: 1em;" onclick="javascript:preview();">預覽</button>
<button style="margin-left: 1em;" onclick="javascript:clearPreview();">清除預覽</button>
<div id="preview" style="margin-left: 1em;"></div>

<a id="addQuestion" href="javascript:addQuestion();" style="margin-left: 1em;">加題目</a><br />
<a id="addQuestionSet" href="javascript:addQuestionSet();" style="margin-left: 1em;">add question-set</a><br />

<br style="line-height: 1em;" />

<fieldset style="border: 1px solid lime; margin: .5em; padding: 1em;">
  <legend>上傳資料:</legend>
  <form method="post" action="/sangTebok" enctype="multipart/form-data">
    <textarea id="xml" name="xml" rows="30" cols="100" readonly="readonly"></textarea>
    <input id="xml2" name="xml2" type="hidden" value="" />
    <br />
    <input type="file" id="files" name="files[]" multiple />
    <output id="list"></output>
    <br />
    <input type="submit" value="送出">
  </form>
</fieldset>

<script>
//checkInput();

// @see http://www.html5rocks.com/en/tutorials/file/dndfiles/
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}

function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // files is a FileList of File objects. List some properties.
  var output = [];
  for (var i = 0, f; f = files[i]; i++) {
    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                f.size, ' bytes, last modified: ',
                f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                '</li>');
  }
  document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
